<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-header">
      <view class="result-status" v-if="status == 3">
        <image :src="asyncImgs.images.done_icon" />
        <text>{{ $t('order.paySuc') }}</text>
      </view>
      <view class="result-price" v-if="status == 3"
        >{{ $t('admin.actual') }}￥{{ optionsData.payPrice }}</view
      >
      <view class="result-btns" v-if="status == 3">
        <view @click="gotoHome">{{ $t('facePay.toHome') }}</view>
        <view @click="gotoDetail">{{ $t('facePay.viewOrders') }}</view>
      </view>
    </view>
    <view class="page-content">
      <view class="order-info">
        <view class="row-list">
          <view class="row-label">{{ $t('facePay.business') }}</view>
          <view class="row-container text-grey">{{ store_info.name }}</view>
        </view>
        <view class="row-list">
          <view class="row-label">{{ $t('facePay.discount') }}</view>
          <view class="row-container info-list">
            <view class="info-item">
              <text>{{ $t('facePay.coupon') }}</text>
              <text>{{ optionsData.sub_price }}</text>
            </view>
          </view>
        </view>
        <view class="row-list">
          <view class="row-label">{{ $t('facePay.payInfo') }}</view>
          <view class="row-container content-aside">
            <text>{{ $t('common.payMethod4') }}</text>
            <text>{{ optionsData.payPrice + optionsData.sub_price }}</text>
          </view>
        </view>
      </view>
      <view class="hold-line">{{ $t('facePay.get') }}</view>
      <view class="coupon-list">
        <view
          class="coupon-item"
          v-for="(item, index) in coupon_list"
          :key="index"
        >
          <view class="title">{{ item.name }}</view>
          <view class="subtitle">{{ item.content }}</view>
          <view class="line-box">
            <view class="line"></view>
          </view>
          <view
            class="btn"
            :class="{ receivedBtn: item.is_receive == 1 }"
            @click="receiveCoupon(item)"
            >{{ item.receive_content }}</view
          >
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      store_info: {},
      optionsData: {},
      coupon_list: [],
      status: '-1', //  订单状态，-1:支付中，0:待发货，1:已取消，2:已发货，3:支付完成
      timer: null,
      requestCount: 0,
    };
  },
  onLoad(t) {
    // t: order_id, payPrice, store_info,  sub_price
    this.optionsData = t;
    if (this.optionsData?.store_info) {
      this.store_info = JSON.parse(this.optionsData.store_info);
    }
    if (this.optionsData?.order_id) {
      this.getPayStatus();
    }
    const stores = this.$store.getters.stores;
    if (stores.douyin_url) {
      uni.setClipboardData({
        data: stores.douyin_url,
        success: () => {
          setTimeout(() => {
            uni.showToast({
              title: '抖口令已复制到剪贴板，打开抖音访问我们的抖音号！',
              icon: 'none',
              duration: 2000,
            });
          }, 1000);
        },
      });
    }
  },
  filters: {},
  methods: {
    gotoHome() {
      this.$utils.toUrl('/pages/home/home', 'switchtab');
    },
    gotoDetail() {
      this.$utils.toUrl(`/order/order/order?status=3`, 'redirectTo');
    },
    // 查询支付状态
    getPayStatus() {
      uni.showLoading({
        title: this.$t('facePay.result'),
        mask: true,
      });
      this.$allrequest.facePay
        .getPayStatus({
          order_id: this.optionsData.order_id,
        })
        .then(res => {
          if (!res.code && res.data) {
            this.status = res.data.status;
            // 如果支付状态不是完成状态，则每秒轮询查一次状态；最多轮询5次；
            if (res.data.status != 3) {
              if (this.timer) {
                clearTimeout(this.timer);
              }
              this.requestCount++;
              if (this.requestCount >= 5) {
                uni.hideLoading();
                this.coupon_list = res.data.coupon_list;
                return;
              }
              this.timer = setTimeout(() => {
                this.getPayStatus();
              }, 1000);
            } else {
              // 如果状态为付款完成，则清除定时器，隐藏loading
              if (this.timer) {
                clearTimeout(this.timer);
              }
              uni.hideLoading();
              this.coupon_list = res.data.coupon_list;
            }
          }
        });
    },
    // 更新优惠券列表
    updateCounponList() {
      this.$allrequest.facePay
        .getPayStatus({
          order_id: this.optionsData.order_id,
        })
        .then(res => {
          if (!res.code && res.data) {
            this.coupon_list = res.data.coupon_list;
          }
        });
    },
    // 领取优惠券
    receiveCoupon(e) {
      if (e.is_receive == 1) return;
      this.$allrequest.facePay
        .receiveCoupon({ id: e.id, store_id: e.store_id })
        .then(res => {
          if (!res.code && res.data) {
            uni.showToast({
              title: this.$t('coupon.success'),
              icon: 'none',
              duration: 2000,
            });
            // 刷新优惠券列表
            this.updateCounponList();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;

  .page-header {
    width: 100%;
    height: 470rpx;
    background: #00aaff;
    color: #ffffff;
    font-family: PingFang SC;
    position: relative;
    z-index: 11;

    .result-status {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 44rpx;
      font-family: PingFang SC;
      font-weight: 500;

      image {
        width: 50rpx;
        height: 50rpx;
        display: block;
        margin-right: 18rpx;
      }
    }

    .result-price {
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
      opacity: 0.9;
      text-align: center;
      margin-top: 24rpx;
    }

    .result-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 49rpx;

      view {
        width: 180rpx;
        height: 60rpx;
        background: rgba(0, 0, 0, 0);
        border: 1rpx solid #ffffff;
        border-radius: 30rpx;
        text-align: center;
        line-height: 60rpx;
        font-size: 26rpx;
        font-weight: 500;
      }
      view:last-child {
        margin-left: 60rpx;
      }
    }
  }

  .page-content {
    width: 100%;
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    position: relative;
    z-index: 111;
    top: -220rpx;

    .order-info {
      padding: 50rpx 24rpx 20rpx 24rpx;
      .row-list {
        display: flex;
        margin-bottom: 50rpx;

        .row-label {
          width: 160rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
        }

        .row-container {
          flex: 1;
        }

        .text-grey {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          display: flex;
          align-items: center;
        }

        .content-aside {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          color: #000000;

          text:first-child {
            color: #999999;
          }
        }

        .info-list {
          font-size: 28rpx;
          color: #fc6266;
          .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
          }

          .info-item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .hold-line {
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      position: relative;
    }

    .hold-line::before {
      content: '';
      width: 220rpx;
      height: 1rpx;
      background: #eeeeee;
      position: absolute;
      left: 39.6rpx;
      top: 15rpx;
      z-index: 11;
    }
    .hold-line::after {
      right: 39.6rpx;
      content: '';
      width: 220rpx;
      height: 1rpx;
      background: #eeeeee;
      position: absolute;
      top: 15rpx;
      z-index: 11;
    }

    .coupon-list {
      display: flex;
      flex-wrap: wrap;
      padding: 29rpx 12.5rpx 0 12.5rpx;

      .coupon-item {
        width: 220rpx;
        height: 280rpx;
        background-color: #fff5f3;
        margin: 0 11.5rpx 21rpx 11.5rpx;
        text-align: center;
        border-radius: 6rpx;

        .title {
          font-size: 32rpx;
          font-weight: 500;
          color: #fe5339;
          margin-top: 39rpx;
          line-height: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 10rpx;
        }
        .subtitle {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
          max-width: 155rpx;
          margin: 23rpx auto 0;
          line-height: 30rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .line-box {
          width: 100%;
          margin-top: 32rpx;
          position: relative;
          display: flex;
          justify-content: center;
          .line {
            width: 180rpx;
            height: 1rpx;
            border: 1rpx dashed #fe5339;
            opacity: 0.1;
          }
        }

        .line-box::before {
          content: '';
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          background-color: #ffffff;
          left: -22rpx;
          top: -15rpx;
          z-index: 11;
          border-radius: 50%;
        }
        .line-box::after {
          content: '';
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          background-color: #ffffff;
          right: -22rpx;
          top: -15rpx;
          z-index: 11;
          border-radius: 50%;
        }

        .btn {
          width: 140rpx;
          height: 52rpx;
          background: #fe5339;
          border-radius: 6rpx;
          text-align: center;
          line-height: 52rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffffff;
          margin: 18rpx auto 0;
        }

        .receivedBtn {
          background: #fff5f3;
          border: 2rpx solid #fe5339;
          color: #fe5339;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
